<template>
	<div class="payment">
		<div class="price_box">
			请付款:<b style="color: #f56c6c;">￥{{this.orderList.amount}}</b>
		</div>
		<div class="order_box">
			<table style="width: 90%;padding-top: 20px;">
				<tr>
					<td>订单号</td>
					<td>
						<el-input v-model="this.orderList.ordid"></el-input>
					</td>
				</tr>
				<tr>
					<td>订单总额</td>
					<td>
						<el-input v-model="this.orderList.amount"></el-input>
					</td>
				</tr>
				<tr>
					<td>姓名</td>
					</td>
					<el-input v-model="this.orderList.ship2name"></el-input>
				</tr>
				<tr>
					<td>电话</td>
					<td>
						<el-input v-model="this.orderList.ship2phone"></el-input>
					</td>
				</tr>
				<tr>
					<td>地址</td>
					<td>
						<el-input v-model="this.orderList.ship2addr"></el-input>
					</td>
				</tr>
				<tr>
					<td> 付款状态</td>
					<td>
						<el-button style="background-color: #f56c6c;color: white;"
							@click="GoPayment=true">未付款，点击这里付款</el-button>

						<el-dialog title="支付金额" :visible.sync="GoPayment" width="20%">
							<span slot="footer" class="dialog-footer">
								<el-button @click="GoPayment = false">取消</el-button>
								<el-button type="primary" @click="notarizePayment()">确定支付</el-button>
							</span>
						</el-dialog>
					</td>
				</tr>
			</table>
			<hr>
			<p style="display: flex;">订单详情</p>
		</div>
		<el-table :data="orderList.items" style="width: 80%;margin: 10px auto;" border>
			<el-table-column label="图片" width="100px">
				<template slot-scope="scope">
					<el-image style="width:50px;height: 50px;"
						:src="`http://127.0.0.1/api/public/showimg/${scope.row.book.pic}`">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称">
			</el-table-column>
			<el-table-column prop="price" label="商品价钱">
			</el-table-column>
			<el-table-column prop="num" label="商品数量">
			</el-table-column>
			<el-table-column label="商品总价">
				<template slot-scope="scope">
					{{scope.row.num*scope.row.price}}
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: 'Payment',
		data() {
			return {
				orderList: [],
				newcartList: [],
				user: {},
				infoList: {},
				GoPayment: false,
			}
		},
		methods: {
			findinfo() {
				this.$get("/api/user/shipInfo", this.user)
					.then((resp) => {
						this.infoList = resp.data.data;
						console.log(this.infoList);
					})
			},
			goOrder() {
				this.$get("/api/fore/ord/findByOrdid/" + this.$route.query.odid)
					.then((resp) => {
						console.log(resp.data.data);
						this.orderList = resp.data.data;
					})
			},
			notarizePayment() {
				this.GoPayment = false;
				this.$postj('/api/fore/ord/addPay/' + this.orderList.ordid)
					.then((resp) => {
						console.log(resp)
						this.$message({
							message: '支付成功',
							type: 'success'
						});
						this.$router.push({
							path: '/pc/order'
						});
					})
			}
		},
		mounted() {
			this.user = this.$store.state.user;
			this.goOrder();
			this.findinfo();
		}
	}
</script>

<style scoped>
	.payment {
		width: 100%;
		margin-top: 80px;
	}

	.price_box {
		width: 85%;
		height: 40px;
		margin: 0 auto;
		border-bottom: 2px solid #b3d8ff;
	}

	.order_box {
		width: 80%;
		height: 320px;
		margin: 0 auto;
		border-left: 1px solid #b3d8ff;
	}
</style>